﻿<div class="modal hide fade" id="CreateCountry" style="display: none;" >
    <div class="modal-header">  
         <div class="breadcrumb" style="margin-top: 10px; margin-bottom: 10px">
            <h3>Create country</h3>
        </div>
    </div> 
    <div class="modal-body" >
        <div data-bind="with: workingCountry">
            <input type="hidden" data-bind="text: Id"/>
            <div class="row">
                <div class="control-group span6" data-bind="css: {'error': ShortName.isValid() == false }" >
                    <label class="control-label"><strong>Short name *</strong></label>
                    <div class="controls">
                        <input  type="text" class="span4" data-bind="value: ShortName" tabindex="1" />
                        <span class="help-inline" data-bind="validationMessage: ShortName"></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span6" data-bind="css: {'error': Description.isValid() == false }" >
                    <label class="control-label"><strong>Description *</strong></label>
                    <div class="controls">
                        <textarea rows="5" cols="15" class="span4" data-bind="value: Description" tabindex="2" ></textarea>
                        <span class="help-inline" data-bind="validationMessage: Description"></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span6" data-bind="css: {'error': Key.isValid() == false }" >
                    <label class="control-label"><strong>Key *</strong></label>
                    <div class="controls">
                        <input rows="5" cols="15" class="span4" data-bind="value: Key" tabindex="3" />
                        <span class="help-inline" data-bind="validationMessage: Key"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-success" data-bind="click: function() { $root.country.saveNewCountry();}"><strong>Save country</strong></a>
        <a href="#" class="btn " data-bind="click: function() { $root.country.cancelNewCountry();  }"><strong>Cancel</strong></a>
    </div>
</div>